<template>
  <el-container>
    <!--头部-->
        <el-header style="min-height:190px;">
            <v-head></v-head>
        </el-header>
    <el-main>
      <div class="outline">
        <el-row>
          <el-col :span="4"><div class="left"></div></el-col>
          <el-col :span="16"
            ><div class="main">
              <el-table :show-header="false" :data="tableData" style="width: 100%;padding-top:30px;min-height:420px">
                  
                <el-table-column label="标题" width="600">
                  <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                          <span style="margin-left: 90px"><a
                      href="javascript:"
                      @click="toPosts(scope.$index, scope.row)"
                      >{{ scope.row.title | ellipsis}}</a
                    ></span>
                      </div>
                  </template>
                </el-table-column>

                <el-table-column label="日期">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime | FormatDate("yyyy-MM-dd")}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!--分页-->
              <br>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>

            </div></el-col
          >
          <el-col :span="4"><div class="right"></div></el-col>
        </el-row>
      </div>
    </el-main>
    <!--底部-->
    <el-footer>
        <v-footer></v-footer>
    </el-footer>
  </el-container>
</template>

<script>
import vHead from "@/views/home/header.vue";
import vMain from "@/views/home/main.vue";
import vFooter from "@/views/home/footer.vue";

import { findById } from "@/api/article";
import { searchData } from "@/api/header";

export default {
  //限制显示的长度
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0,20) + '...'
      }
      return value
    }
  },
  components: {
    vHead,
    vMain,
    vFooter,
  },
  data() {
    return {
      tableData: [],
      query:{},
      total:0,
      size:7,
      current:1
    };
  },
  created(){
      this.query=this.$route.query.query
      this.getDataList();
  },
  methods: {
    handleSizeChange(val) {
      this.size=val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.current=val;
      this.getDataList();
    },

    //获取列表信息
    async getDataList() {
      console.log("router",this.$route.query.query)
      console.log("query",this.query)
      const { data: res } = await searchData(this.current, this.size,this.query);
      this.tableData = res.data.list;
      this.total = res.data.recordTotal;
      this.menuName=res.data.menuName;
    },

    //根据id查询,跳转到帖子
    async toPosts(index, row) {
      //console.log(index, row);
      console.log(row.id);
      const { data: res } = await findById(row.id);
      if (200 == res.code) {
        console.log(res.data);
        this.$router.push({
          path: "/posts",
          query: res.data,
        });
      } else {
        this.$message.error("查找失败！");
      }
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.left {
  background: #99a9bf;
  min-height: 500px;
}
.main {
  background: #d3dce6;
  min-height: 500px;
}
.right {
  background: #99a9bf;
  min-height: 500px;
}
a{
  text-decoration: none;
  font-weight: 500;
}
</style>